<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{admin/layout/base}">
<head>
    <title>消息通知管理</title>
    <style>
        .nav-tabs .nav-link.active {
            font-weight: bold;
        }
        .template-status {
            width: 80px;
        }
    </style>
</head>
<body>
    <div layout:fragment="content">
        <!-- 标题栏 -->
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0">消息通知管理</h1>
                    </div>
                </div>
            </div>
        </div>

        <!-- 主要内容 -->
        <div class="content">
            <div class="container-fluid">
                <!-- 选项卡 -->
                <ul class="nav nav-tabs mb-3" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" data-toggle="tab" href="#system-messages" role="tab">
                            系统消息
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#message-templates" role="tab">
                            消息模板
                        </a>
                    </li>
                </ul>

                <!-- 选项卡内容 -->
                <div class="tab-content">
                    <!-- 系统消息列表 -->
                    <div class="tab-pane fade show active" id="system-messages">
                        <div class="card">
                            <div class="card-header">
                                <div class="d-flex justify-content-between align-items-center">
                                    <h3 class="card-title">系统消息列表</h3>
                                    <button type="button" class="btn btn-primary" onclick="showCreateMessageModal()">
                                        发送系统消息
                                    </button>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-striped">
                                        <thead>
                                            <tr>
                                                <th>标题</th>
                                                <th>内容</th>
                                                <th>接收者类型</th>
                                                <th>发送状态</th>
                                                <th>创建时间</th>
                                                <th>操作</th>
                                            </tr>
                                        </thead>
                                        <tbody id="messageTableBody">
                                            <!-- 消息列表将通过JavaScript动态加载 -->
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 消息模板管理 -->
                    <div class="tab-pane fade" id="message-templates">
                        <div class="card">
                            <div class="card-header">
                                <div class="d-flex justify-content-between align-items-center">
                                    <h3 class="card-title">消息模板管理</h3>
                                    <button type="button" class="btn btn-primary" onclick="showCreateTemplateModal()">
                                        添加模板
                                    </button>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-striped">
                                        <thead>
                                            <tr>
                                                <th>模板代码</th>
                                                <th>模板名称</th>
                                                <th>标题</th>
                                                <th>内容</th>
                                                <th>类型</th>
                                                <th>状态</th>
                                                <th>操作</th>
                                            </tr>
                                        </thead>
                                        <tbody id="templateTableBody">
                                            <!-- 模板列表将通过JavaScript动态加载 -->
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 发送系统消息模态框 -->
        <div class="modal fade" id="createMessageModal" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">发送系统消息</h5>
                        <button type="button" class="close" data-dismiss="modal">
                            <span>&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form id="createMessageForm">
                            <div class="form-group">
                                <label>标题</label>
                                <input type="text" class="form-control" name="title" required>
                            </div>
                            <div class="form-group">
                                <label>内容</label>
                                <textarea class="form-control" name="content" rows="4" required></textarea>
                            </div>
                            <div class="form-group">
                                <label>接收者类型</label>
                                <select class="form-control" name="receiverType" required>
                                    <option value="ALL">所有用户</option>
                                    <option value="RESIDENT">居民</option>
                                    <option value="COLLECTOR">回收员</option>
                                </select>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" onclick="createMessage()">发送</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 创建/编辑模板模态框 -->
        <div class="modal fade" id="templateModal" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">消息模板</h5>
                        <button type="button" class="close" data-dismiss="modal">
                            <span>&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form id="templateForm">
                            <input type="hidden" name="id">
                            <div class="form-group">
                                <label>模板代码</label>
                                <input type="text" class="form-control" name="templateCode" required>
                            </div>
                            <div class="form-group">
                                <label>模板名称</label>
                                <input type="text" class="form-control" name="templateName" required>
                            </div>
                            <div class="form-group">
                                <label>标题</label>
                                <input type="text" class="form-control" name="title" required>
                            </div>
                            <div class="form-group">
                                <label>内容</label>
                                <textarea class="form-control" name="content" rows="4" required></textarea>
                                <small class="form-text text-muted">
                                    使用 {{参数名}} 作为变量占位符，如：尊敬的{{userName}}
                                </small>
                            </div>
                            <div class="form-group">
                                <label>类型</label>
                                <select class="form-control" name="type" required>
                                    <option value="SYSTEM">系统公告</option>
                                    <option value="USER">用户消息</option>
                                </select>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" onclick="saveTemplate()">保存</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <th:block layout:fragment="scripts">
        <script th:src="@{/js/admin/notifications.js}"></script>
    </th:block>
</body>
</html> 